<template>
  <div class="main user-layout-register" style="margin-top: 40px">
    <a-form
      v-if="state.formType === 'verifyPhone'"
      layout="vertical"
      :form="verifyPhoneForm"
      :hideRequiredMark="true"
    >
      <a-form-item
        label="手机号"
      >
        <a-input
          size="large"
          placeholder="账号关联的手机号"
          v-decorator="['phone', {rules: [{ required: true, message: '请输入正确的手机号', pattern: '^(?:\\+?86)?1(?:3\\d{3}|5[^4\\D]\\d{2}|8\\d{3}|7(?:[235-8]\\d{2}|4(?:0\\d|1[0-2]|9\\d))|9[0-35-9]\\d{2}|66\\d{2})\\d{6}$' }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]"
        >
        </a-input>
      </a-form-item>

      <a-row :gutter="16">
        <a-col class="gutter-row" :span="16">
          <a-form-item
            label="图片验证码"
          >
            <a-input
              size="large"
              type="text"
              placeholder="请输入图片验证码"
              v-decorator="['pic_captcha', {rules: [{ required: true, message: '请输入图片验证码' }], validateTrigger: 'blur'}]"
            >
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <img class="getCaptcha" @click="refreshPicCaptcha" :src="`data:image/jpg;base64,${state.picCaptcha}`"/>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col class="gutter-row" :span="16">
          <a-form-item
            label="短信验证码"
          >
            <a-input
              size="large"
              type="text"
              placeholder="请输入短信验证码"
              v-decorator="['sms_captcha', {rules: [{ required: true, message: '请输入短信验证码' }], validateTrigger: 'blur'}]"
            >
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <a-button
            class="getCaptcha"
            size="large"
            :disabled="state.smsSendBtn"
            @click.stop.prevent="getSmsCaptcha"
            v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
        </a-col>
      </a-row>

      <a-form-item>
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="register-button"
          :loading="verifyPhoneBtn"
          @click.stop.prevent="handleNextStep"
          :disabled="verifyPhoneBtn">下一步
        </a-button>
        <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
      </a-form-item>
    </a-form>

    <a-form
      v-if="state.formType === 'resetPassword'"
      layout="vertical"
      :form="resetPasswordForm"
      :hideRequiredMark="true"
    >
      <a-popover
        placement="rightTop"
        :trigger="['focus']"
        :getPopupContainer="(trigger) => trigger.parentElement"
        v-model="state.passwordLevelChecked">
        <template slot="content">
          <div :style="{ width: '240px' }">
            <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
            <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor "/>
            <div style="margin-top: 10px;">
              <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
            </div>
          </div>
        </template>
        <a-form-item>
          <a-input
            size="large"
            type="password"
            @click="handlePasswordInputClick"
            autocomplete="false"
            placeholder="至少6位密码，区分大小写"
            v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
          ></a-input>
        </a-form-item>
      </a-popover>

      <a-form-item>
        <a-input
          size="large"
          type="password"
          autocomplete="false"
          placeholder="确认密码"
          v-decorator="['confirm_password', {rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
        ></a-input>
      </a-form-item>

      <a-form-item>
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="register-button"
          :loading="resetPasswordBtn"
          @click.stop.prevent="confirmResetPassword"
          :disabled="resetPasswordBtn">确认重置密码
        </a-button>
        <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import { mixinDevice } from '@/utils/mixin.js'
  import md5 from 'md5'
  import { getPicCaptcha, getSmsCaptcha, resetPassword, verificationSmsCaptcha } from '@/api/login'

  const levelNames = {
    0: '低',
    1: '低',
    2: '中',
    3: '强'
  }
  const levelClass = {
    0: 'error',
    1: 'error',
    2: 'warning',
    3: 'success'
  }
  const levelColor = {
    0: '#ff0000',
    1: '#ff0000',
    2: '#ff7e05',
    3: '#52c41a'
  }
  export default {
    name: 'Register',
    components: {},
    mixins: [mixinDevice],
    data () {
      return {
        verifyPhoneForm: this.$form.createForm(this),
        resetPasswordForm: this.$form.createForm(this),

        state: {
          time: 60,
          smsSendBtn: false,
          passwordLevel: 0,
          passwordLevelChecked: false,
          percent: 10,
          progressColor: '#FF0000',
          picCaptchaUuid: '',
          refreshPicCaptchaIng: false,
          picCaptcha: '',
          formType: 'verifyPhone',
          smsCaptchaUuid: '',
          phone: '',
          smsCaptcha: ''
        },

        verifyPhoneBtn: false,
        resetPasswordBtn: false
      }
    },
    created () {
      this.refreshPicCaptcha()
    },
    computed: {
      passwordLevelClass () {
        return levelClass[this.state.passwordLevel]
      },
      passwordLevelName () {
        return levelNames[this.state.passwordLevel]
      },
      passwordLevelColor () {
        return levelColor[this.state.passwordLevel]
      }
    },
    methods: {
      handlePasswordLevel (rule, value, callback) {
        let level = 0

        // 判断这个字符串中有没有数字
        if (/[0-9]/.test(value)) {
          level++
        }
        // 判断字符串中有没有字母
        if (/[a-zA-Z]/.test(value)) {
          level++
        }
        // 判断字符串中有没有特殊符号
        if (/[^0-9a-zA-Z_]/.test(value)) {
          level++
        }
        this.state.passwordLevel = level
        this.state.percent = level * 30
        if (level >= 2) {
          if (level >= 3) {
            this.state.percent = 100
          }
          callback()
        } else {
          if (level === 0) {
            this.state.percent = 10
          }
          callback(new Error('密码强度不够'))
        }
      },

      handlePasswordCheck (rule, value, callback) {
        const password = this.resetPasswordForm.getFieldValue('password')
        console.log('value', value)
        if (value === undefined) {
          callback(new Error('请输入密码'))
        }
        if (value && password && value.trim() !== password.trim()) {
          callback(new Error('两次密码不一致'))
        }
        callback()
      },

      handlePhoneCheck (rule, value, callback) {
        console.log('handlePhoneCheck, rule:', rule)
        console.log('handlePhoneCheck, value', value)
        console.log('handlePhoneCheck, callback', callback)

        callback()
      },

      handlePasswordInputClick () {
        if (!this.isMobile()) {
          this.state.passwordLevelChecked = true
          return
        }
        this.state.passwordLevelChecked = false
      },

      handleNextStep () {
        const { verifyPhoneForm: { validateFields }, state } = this
        validateFields({ force: true }, (err, values) => {
          if (!err) {
            verificationSmsCaptcha({
              phone: values.phone,
              sms_captcha: values.sms_captcha,
              uuid: state.smsCaptchaUuid
            }).then(res => {
              state.formType = 'resetPassword'
              state.phone = values.phone
              state.smsCaptcha = values.sms_captcha
            }).catch(err => {
              this.requestFailed(err)
            })
          }
        })
      },

      confirmResetPassword () {
        const { resetPasswordForm: { validateFields }, state, $router } = this
        validateFields({ force: true }, (err, values) => {
          if (!err) {
            console.log(values.password)
            resetPassword({
              phone: state.phone,
              sms_captcha: state.smsCaptcha,
              uuid: state.smsCaptchaUuid,
              new_password: md5(values.password)
            }).then(res => {
              $router.push('/user/login')
            })
          }
        })
      },

      getSmsCaptcha (e) {
        e.preventDefault()
        const { verifyPhoneForm: { validateFields }, state, $message } = this

        validateFields(['phone', 'pic_captcha'], { force: true },
          (err, values) => {
            if (err) {
              return
            }

            state.smsSendBtn = true

            const interval = window.setInterval(() => {
              if (state.time-- <= 0) {
                state.time = 60
                state.smsSendBtn = false
                window.clearInterval(interval)
              }
            }, 1000)

            const hide = $message.loading('验证码发送中..', 0)

            getSmsCaptcha({
              phone: values.phone,
              pic_captcha: values.pic_captcha,
              uuid: state.picCaptchaUuid
            }).then(res => {
              setTimeout(hide, 2500)
              state.smsCaptchaUuid = res.uuid
            }).catch(err => {
              setTimeout(hide, 1)
              clearInterval(interval)
              state.time = 60
              state.smsSendBtn = false
              this.requestFailed(err)
              this.refreshPicCaptcha()
            })
          }
        )
      },

      requestFailed (err) {
        this.$notification['error']({
          message: '错误',
          description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
          duration: 4
        })
        this.verifyPhoneBtn = false
      },

      refreshPicCaptcha () {
        const { verifyPhoneForm, state } = this
        state.refreshPicCaptchaIng = true

        getPicCaptcha().then(res => {
          state.picCaptcha = res.image
          state.picCaptchaUuid = res.uuid
          state.refreshPicCaptchaIng = false
          verifyPhoneForm.setFieldsValue({ 'pic_captcha': '' })
        })
      }
    },
    watch: {
      'state.passwordLevel' (val) {
        console.log(val)
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-register {

    &.error {
      color: #ff0000;
    }

    &.warning {
      color: #ff7e05;
    }

    &.success {
      color: #52c41a;
    }

  }

  .main {
    margin: 40px auto;
  }

  .user-layout-register {

    .getCaptcha {
      margin-top: 29px;
      display: block;
      width: 100%;
      height: 40px;
    }

    .register-button {
      width: 50%;
    }

    .login {
      float: right;
      line-height: 40px;
    }
  }
</style>
